<template>
	<div class="personnelListHx">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }"><i class="lh lh-seller fw_100"></i></el-breadcrumb-item>
			<el-breadcrumb-item>C端-人才</el-breadcrumb-item>
			<el-breadcrumb-item>人才画像</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row :gutter="15" class="Module2">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
				<div class="box-shadow" style="background-color: #ffffff; height: 395px; border-radius: 5px;">
					<div class="card-header m2-report">
						<h4 style="font-size: 17px; color: black;">人才画像</h4>
					</div>
					<el-row :gutter="15" class="Module2">
						<el-col :xs="24" :sm="24" :md="24" :lg="10" :xl="10">
							<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
								<div class="wrap_main">
									<i class="fz_20 lh lh-nan show_icon" style="color: #2f4393;" v-if="redUserInfo.gender == 'male'"></i>
									<i class="fz_20 lh lh-nv show_icon" style="color: #f3b1b8;" v-if="redUserInfo.gender == 'female'"></i>
									<img :src="avatars" alt="头像" />
									<el-rate
										v-model="redUserInfo.level"
										:colors="colors"
										disabled
										style="margin-top: 10px; text-align: center;"
									></el-rate>
								</div>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
								<ul class="wrap_ul">
									<li>
										<span class="label">姓名：</span>
										<span class="next_label">{{ redUserInfo.name }}</span>
										<span class="label">性别：</span>
										<span class="next_label" v-if="redUserInfo.gender == 'male'">男</span>
										<span class="next_label" v-if="redUserInfo.gender == 'female'">女</span>
										<el-link type="primary" class="InfoFont text-success" @click="goToPersonnelEdit(redUserInfo.id)"
											>查看更多</el-link
										>
									</li>
									<li>
										<span class="label">出生日期：</span>
										<span class="next_label">{{ redUserInfo.birthday | BirthdayString }}</span>
										<span class="label">民族：</span>
										<span class="next_label">{{ redUserInfo.nationality }}</span>
									</li>
									<li>
										<span class="label">所在区域：</span><span class="next_label">{{ redUserInfo.city }}</span>
									</li>
									<li>
										<span class="label">常驻地址：</span
										><span class="next_label">{{ redUserInfo.address }}&nbsp;{{ redUserInfo.detailed_address }}</span>
									</li>
									<li>
										<span class="label">最高学历：</span><span class="next_label">{{ redUserInfo.education }}</span>
									</li>
								</ul>
							</el-col>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
							<ybpnext
								:all_task_finish="redUserInfo.all_task_finish"
								:month_task_finish="redUserInfo.month_task_finish"
							></ybpnext>
						</el-col>

						<el-col :xs="24" :sm="24" :md="24" :lg="7" :xl="7">
							<legenFan :staff_sn="redUserInfo.staff_sn"></legenFan>
						</el-col>
					</el-row>

					<el-row :gutter="15" class="Module2">
						<div class="card-header m2-report">
							<h4>平台标签</h4>
						</div>
						<!-- 平台标签 -->
						<div class="labels">
							<div
								class="labels_label check_label"
								v-for="(item, index) in redUserInfo.labels_platform_data"
								:key="index"
							>
								{{ item.name }}
							</div>
						</div>
					</el-row>
					<el-row :gutter="15" class="Module2">
						<div class="card-header m2-report">
							<h4>可工作时间段</h4>
						</div>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<div class="wrap_table" style="width: 56%;">
								<template>
									<el-table
										:data="tableData"
										style="width: 96%; margin: 0 auto;"
										height="200"
										:show-overflow-tooltip="false"
									>
										<el-table-column prop="date" label="班次" align="center" fixed="left"> </el-table-column>
										<el-table-column prop="a" label="星期一" align="center" width="100"> </el-table-column>
										<el-table-column prop="b" label="星期二" align="center" width="100"> </el-table-column>
										<el-table-column prop="c" label="星期三" align="center" width="100"> </el-table-column>
										<el-table-column prop="d" label="星期四" align="center" width="100"> </el-table-column>
										<el-table-column prop="e" label="星期五" align="center" width="100"> </el-table-column>
										<el-table-column prop="f" label="星期六" align="center" width="100"> </el-table-column>
										<el-table-column prop="g" label="星期日" align="center" width="100"> </el-table-column>
									</el-table>
								</template>
							</div>
							<div class="wrap_table" style="width: 42%;">
								<ul class="wrap_uls">
									<li>{{ redUserInfo.job_work_time_name[5] }}：{{ redUserInfo.job_work_time[5] }}</li>
									<li>{{ redUserInfo.job_work_time_name[4] }}：{{ redUserInfo.job_work_time[4] }}</li>
									<li>{{ redUserInfo.job_work_time_name[3] }}：{{ redUserInfo.job_work_time[3] }}</li>
									<li>{{ redUserInfo.job_work_time_name[2] }}：{{ redUserInfo.job_work_time[2] }}</li>
									<li>{{ redUserInfo.job_work_time_name[1] }}：{{ redUserInfo.job_work_time[1] }}</li>
								</ul>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="15" class="Module2">
						<div style="float: left;">
							<div class="card-header m2-report">
								<h4>期望任务</h4>
							</div>
							<!-- 期望任务 -->
							<div class="labels">
								<div class="labels_label check_label" v-for="(item, index) in redUserInfo.job_types" :key="index">
									{{ item.name }}
								</div>
							</div>
						</div>
						<div style="float: left; margin-left: 30px;">
							<div class="card-header m2-report">
								<h4>期望工作商圈</h4>
							</div>
							<!-- 期望工作商圈 -->
							<div class="labels">
								<div class="labels_label check_label" v-for="(item, index) in redUserInfo.job_areas" :key="index">
									{{ item.name }}
								</div>
							</div>
						</div>
					</el-row>
					<el-row :gutter="15" class="Module2">
						<div>
							<div class="card-header m2-report">
								<h4>健康证</h4>
							</div>
							<!-- 健康证 -->
							<div v-if="redUserInfo.jkz != '' && redUserInfo.jkz2 != ''">
								<div class="row-info clear" style="margin-left: 20px;">
									<div class="fl list-cont">
										<showimg :imgsrc="redUserInfo.jkz"></showimg>
									</div>
									<div class="fl list-cont">
										<showimg :imgsrc="redUserInfo.jkz2"></showimg>
									</div>
								</div>
								<div class="jkz">
									<div>发证城市：{{ redUserInfo.fzcs }}</div>
									<div>健康证号：{{ redUserInfo.jkzh }}</div>
									<div>有效期：{{ redUserInfo.yxq }}</div>
								</div>
							</div>
							<div v-else>
								<div class="row-info clear no-jkz">
									暂未上传健康证
								</div>
							</div>
						</div>
					</el-row>
					<el-row :gutter="15" class="Module2">
						<div class="card-header m2-report">
							<h4>
								1年内服务的Top3店铺
								<span v-if="redUserInfo.first_work_date" style="color: #666; font-size: 12px; margin-left: 15px;">
									首次出工日期：{{ redUserInfo.first_work_date | format }}</span
								>
							</h4>
						</div>
						<el-row :gutter="15" class="Module2">
							<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
								<div class="wrap_tables">
									<el-table :data="redUserInfo.service_history" height="180" style="width: 100%;">
										<el-table-column prop="id" label="序号" width="80px">
											<template slot-scope="{ row, $index }">
												<span>{{ $index + 1 }}</span>
											</template>
										</el-table-column>
										<el-table-column prop="shop_name" label="店铺名称" align="center"> </el-table-column>
										<el-table-column prop="task_num" label="服务次数" align="center"> </el-table-column>
									</el-table>
								</div>
							</el-col>
						</el-row>
					</el-row>
					<div v-if="status_tab">
						<el-row :gutter="15" class="Module2">
							<div class="card-header m2-report">
								<h4>工作经历</h4>
							</div>
							<div class="cont_work" v-for="(item, index) in redUserInfo.work_experience" :key="index">
								<p class="title">
									{{ item.start_time }} - {{ item.end_time }}<span>{{ item.enterprise_name }}</span
									>{{ item.position }}
								</p>
								<p>
									{{ item.job_content }}
								</p>
							</div>
						</el-row>
						<el-row :gutter="15" class="Module2">
							<div class="card-header m2-report">
								<h4>教育经历</h4>
							</div>
							<div class="cont_work" v-for="(item, index) in redUserInfo.education_experience" :key="index">
								<p class="title">
									{{ item.entrance_time }} - {{ item.graduate_time }}<span>{{ item.school }}</span
									>{{ item.specialty }}
								</p>
							</div>
						</el-row>
						<el-row :gutter="15" class="Module2">
							<div class="card-header m2-report">
								<h4>自我评价</h4>
							</div>
							<div class="cont_work">
								<p class="title">
									{{ redUserInfo.self_assessment }}
								</p>
							</div>
						</el-row>
						<el-row :gutter="15" class="Module2">
							<div class="card-header m2-report">
								<h4>个人技能</h4>
							</div>
							<!-- 个人技能 -->
							<div class="labels">
								<div
									class="labels_label check_label"
									v-for="(item, index) in redUserInfo.labels_skill_data"
									:key="index"
								>
									{{ item.name }}
								</div>
							</div>
						</el-row>
					</div>
					<el-row :gutter="15" class="Module2" style="margin-bottom: 10px;">
						<h4 class="status_tab" @click="status_tab = !status_tab">{{ status_tab ? '收起' : '更多' }}</h4>
					</el-row>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import dayjs from 'dayjs'
var common = require('../../../static/tool.js')
import ybp from '../components/echarts/Ybp.vue'
import ybpnext from '../components/echarts/Ybpnext.vue'
import legenFan from '../components/echarts/LegendFan.vue'
export default {
	name: 'PersonnelListHx',
	data() {
		return {
			ids: '',
			index: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			status_tab: false,
			level: 3,
			// 颜色设定
			colors: ['#cf2e22', '#cf2e22', '#cf2e22'],
			avatars: '', //头像
			//人才详情
			redUserInfo: {
				name: '', //姓名
				mobile: '', //手机号码
				city: '', //所在区域
				education: '', //最高学历
				level: 0, //星级
				job_types: [], //期望任务
				job_areas: [], //期望工作商圈
				job_times: [], //可工作时间段
				job_work_time: [], //工作时段
				job_work_time_name: [], //工作时段名称
				service_history: [], //1年内服务的Top3店铺2
				labels_platform_data: [], //平台标签
				work_experience: [], //工作经历
				education_experience: [], //教育经历
				self_assessment: [], //自我评价
				labels_skill_data: [], //个人技能
				all_task_finish: '', //累计任务
				month_task_finish: '', //本月任务
				jkz: '', //健康证
				jkz2: '', //健康证
				fzcs: '', //发证城市
				jkzh: '', //健康证号
				yxq: '', //有效期
				staff_sn: ''
			},
			evaluatStatistic: [], //评价统计数据
			tableData: [
				{
					date: '早班',
					a: '',
					b: '',
					c: '',
					d: '',
					e: '',
					f: '',
					g: ''
				},
				{
					date: '中班',
					a: '',
					b: '',
					c: '',
					d: '',
					e: '',
					f: '',
					g: ''
				},
				{
					date: '晚班',
					a: '',
					b: '',
					c: '',
					d: '',
					e: '',
					f: '',
					g: ''
				},
				{
					date: '夜班',
					a: '',
					b: '',
					c: '',
					d: '',
					e: '',
					f: '',
					g: ''
				}
				// {
				//     date: "全天",
				//     a: "",
				//     b: "",
				//     c: "",
				//     d: "",
				//     e: "",
				//     f: "",
				//     g: "",
				// },
			]
		}
	},
	components: { ybp, ybpnext, legenFan },
	created() {
		// this.staff_sn = this.$route.query.staff_sn
		this.TalentDetails()
	},
	// mounted() {
	// 	this.TalentDetails()
	// },
	methods: {
		// 请求人才详情接口
		TalentDetails() {
			let fn = new FormData()
			fn.append('id', this.$route.query.id)
			fn.append('service_history', 'service_history')
			this.$http.post(this.url + '/user/getUserInfo', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						this.redUserInfo = res.data.data
						if (this.redUserInfo.first_work_date === '0000-00-00 00:00:00') {
							this.redUserInfo.first_work_date = ''
						}
						this.redUserInfo.service_history = this.redUserInfo.service_history.slice(0, 3)
						//健康证
						if (this.redUserInfo.certificate_health.front_pic != '') {
							this.redUserInfo.jkz = this.head_url + this.redUserInfo.certificate_health.front_pic
						} else {
							this.redUserInfo.jkz = ''
						}

						if (this.redUserInfo.certificate_health.back_pic != '') {
							this.redUserInfo.jkz2 = this.head_url + this.redUserInfo.certificate_health.back_pic
						} else {
							this.redUserInfo.jkz2 = ''
						}
						this.redUserInfo.fzcs = this.redUserInfo.certificate_health.city_name
						this.redUserInfo.jkzh = this.redUserInfo.certificate_health.health_sn
						this.redUserInfo.yxq = this.redUserInfo.certificate_health.expire_time
						// this.redUserInfo.staff_sn = this.redUserInfo.staff_sn
						// 头像判断
						if (this.redUserInfo.avatar == '') {
							this.avatars = this.head_url + 'images/160102759620181.png'
						} else {
							if (this.redUserInfo.avatar.indexOf('https') == -1) {
								// 自己传的头像
								this.avatars = this.head_url + this.redUserInfo.avatar
							} else {
								// 微信头像
								this.avatars = this.redUserInfo.avatar
							}
						}
						var job_times_info = this.redUserInfo.job_times_info
						// 周一的早中晚夜
						this.tableData[0].a =
							job_times_info.Monday[0].is_set == true
								? job_times_info.Monday[0].start + '-' + job_times_info.Monday[0].end
								: '-'
						this.tableData[1].a =
							job_times_info.Monday[1].is_set == true
								? job_times_info.Monday[1].start + '-' + job_times_info.Monday[1].end
								: '-'
						this.tableData[2].a =
							job_times_info.Monday[2].is_set == true
								? job_times_info.Monday[2].start + '-' + job_times_info.Monday[2].end
								: '-'
						this.tableData[3].a =
							job_times_info.Monday[3].is_set == true
								? job_times_info.Monday[3].start + '-' + job_times_info.Monday[3].end
								: '-'
						// 周二的早中晚夜
						this.tableData[0].b =
							job_times_info.Tuesday[0].is_set == true
								? job_times_info.Tuesday[0].start + '-' + job_times_info.Tuesday[0].end
								: '-'
						this.tableData[1].b =
							job_times_info.Tuesday[1].is_set == true
								? job_times_info.Tuesday[1].start + '-' + job_times_info.Tuesday[1].end
								: '-'
						this.tableData[2].b =
							job_times_info.Tuesday[2].is_set == true
								? job_times_info.Tuesday[2].start + '-' + job_times_info.Tuesday[2].end
								: '-'
						this.tableData[3].b =
							job_times_info.Tuesday[3].is_set == true
								? job_times_info.Tuesday[3].start + '-' + job_times_info.Tuesday[3].end
								: '-'
						// 周三的早中晚夜
						this.tableData[0].c =
							job_times_info.Wednesday[0].is_set == true
								? job_times_info.Wednesday[0].start + '-' + job_times_info.Wednesday[0].end
								: '-'
						this.tableData[1].c =
							job_times_info.Wednesday[1].is_set == true
								? job_times_info.Wednesday[1].start + '-' + job_times_info.Wednesday[1].end
								: '-'
						this.tableData[2].c =
							job_times_info.Wednesday[2].is_set == true
								? job_times_info.Wednesday[2].start + '-' + job_times_info.Wednesday[2].end
								: '-'
						this.tableData[3].c =
							job_times_info.Wednesday[3].is_set == true
								? job_times_info.Wednesday[3].start + '-' + job_times_info.Wednesday[3].end
								: '-'
						// 周四的早中晚夜
						this.tableData[0].d =
							job_times_info.Thursday[0].is_set == true
								? job_times_info.Thursday[0].start + '-' + job_times_info.Thursday[0].end
								: '-'
						this.tableData[1].d =
							job_times_info.Thursday[1].is_set == true
								? job_times_info.Thursday[1].start + '-' + job_times_info.Thursday[1].end
								: '-'
						this.tableData[2].d =
							job_times_info.Thursday[2].is_set == true
								? job_times_info.Thursday[2].start + '-' + job_times_info.Thursday[2].end
								: '-'
						this.tableData[3].d =
							job_times_info.Thursday[3].is_set == true
								? job_times_info.Thursday[3].start + '-' + job_times_info.Thursday[3].end
								: '-'
						// 周五的早中晚夜
						this.tableData[0].e =
							job_times_info.Friday[0].is_set == true
								? job_times_info.Friday[0].start + '-' + job_times_info.Friday[0].end
								: '-'
						this.tableData[1].e =
							job_times_info.Friday[1].is_set == true
								? job_times_info.Friday[1].start + '-' + job_times_info.Friday[1].end
								: '-'
						this.tableData[2].e =
							job_times_info.Friday[2].is_set == true
								? job_times_info.Friday[2].start + '-' + job_times_info.Friday[2].end
								: '-'
						this.tableData[3].e =
							job_times_info.Friday[3].is_set == true
								? job_times_info.Friday[3].start + '-' + job_times_info.Friday[3].end
								: '-'
						// 周六的早中晚夜
						this.tableData[0].f =
							job_times_info.Saturday[0].is_set == true
								? job_times_info.Saturday[0].start + '-' + job_times_info.Saturday[0].end
								: '-'
						this.tableData[1].f =
							job_times_info.Saturday[1].is_set == true
								? job_times_info.Saturday[1].start + '-' + job_times_info.Saturday[1].end
								: '-'
						this.tableData[2].f =
							job_times_info.Saturday[2].is_set == true
								? job_times_info.Saturday[2].start + '-' + job_times_info.Saturday[2].end
								: '-'
						this.tableData[3].f =
							job_times_info.Saturday[3].is_set == true
								? job_times_info.Saturday[3].start + '-' + job_times_info.Saturday[3].end
								: '-'
						// 周天的早中晚夜
						this.tableData[0].g =
							job_times_info.Sunday[0].is_set == true
								? job_times_info.Sunday[0].start + '-' + job_times_info.Sunday[0].end
								: '-'
						this.tableData[1].g =
							job_times_info.Sunday[1].is_set == true
								? job_times_info.Sunday[1].start + '-' + job_times_info.Sunday[1].end
								: '-'
						this.tableData[2].g =
							job_times_info.Sunday[2].is_set == true
								? job_times_info.Sunday[2].start + '-' + job_times_info.Sunday[2].end
								: '-'
						this.tableData[3].g =
							job_times_info.Sunday[3].is_set == true
								? job_times_info.Sunday[3].start + '-' + job_times_info.Sunday[3].end
								: '-'
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$alert('<strong>' + res.data.msg + '</strong>', '提示', {
							dangerouslyUseHTMLString: true
						})
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		//跳转人才编辑
		goToPersonnelEdit(id) {
			const { href } = this.$router.resolve({ path: '/personnelEdit', query: { id: id } })
			window.open(href, '_blank')
		},
		//返回
		back() {
			this.$router.go(-1)
		}
	},
	filters: {
		format(val) {
			if (!val) return ''
			return dayjs(val).format('YYYY-MM-DD')
		}
	}
}
</script>

<style scoped>
.card-header {
	/* border-bottom: 1px solid #f9f9f9; */
	line-height: 30px;
	-ms-grid-row-align: center;
	align-self: center;
	padding: 5px 25px;
	display: flex;
	align-items: center;
}

.card-header h4 {
	font-size: 14px;
	line-height: 28px;
	padding-right: 10px;
	margin-bottom: 0;
	color: #000000;
	flex: 1;
}
.wrap_main {
	position: relative;
	margin-top: 25px;
	left: -11px;
}

.wrap_ul {
	margin-top: 20px;
	font-family: 'Microsoft YaHei UI';
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	color: #888888;
	line-height: 2.5em;
	padding: 0 20px 0 0;
}

.wrap_ul .label {
	display: inline-block;
	min-width: 70px;
	text-align: right;
}

.wrap_ul .next_label {
	display: inline-block;
	min-width: 70px;
	text-align: left;
}
.wrap_main img {
	display: block;
	margin: 0 auto;
	width: 55px;
	height: 55px;
	border-radius: 100%;
}
.show_icon {
	position: absolute;
	top: 2px;
	right: 2px;
}

.box-shadow {
	height: auto !important;
}

.wrap_table {
	width: 50%;
	float: left;
	/* padding: 0 0 0 20px; */
}

.wrap_tables {
	width: 100%;
	padding: 0 20px 0 20px;
}

.wrap_table p {
	font-size: 14px;
	line-height: 3em;
}

.wrap_tables p {
	font-size: 14px;
	line-height: 2em;
}

.cont_work {
	width: 90%;
	margin-bottom: 10px;
	margin-left: 28px;
}

.cont_work p {
	font-size: 14px;
	color: #888888;
	line-height: 2em;
}

.cont_work span {
	margin: 0 15px;
	color: #000;
}

.wrap_uls {
	/* width: 40%; */
	float: left;
	/* margin-top: 30px; */
	font-family: 'Microsoft YaHei UI';
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	color: #000;
	line-height: 2.5em;
	text-indent: 2em;
}
.labels {
	overflow: auto;
	margin-left: 20px;
	margin-bottom: 5px;
}
.labels .labels_label {
	float: left;
	cursor: pointer;
	height: 20px;
	line-height: 20px;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
	padding: 4px 8px;
}

.jkz {
	float: left;
	margin: 10px 0;
	color: #909399;
}

.jkz div {
	float: left;
	margin-left: 25px;
	font-size: 14px;
}

.no-jkz {
	margin-left: 20px;
	height: 70px;
	text-align: center;
	width: 260px;
	font-size: 14px;
	float: left;
	padding-top: 30px;
}

.status_tab {
	cursor: pointer;
	font-size: 14px;
	font-weight: normal;
	margin-right: 40px;
	float: right;
	margin-bottom: 20px;
}
</style>



// WEBPACK FOOTER //
// src/components/staff/PersonnelListHx.vue